<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css"
          href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"/>
    <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <style type="text/css">
        .MapClass {
            width: 100%;
            height: 600px;
            border: 1px solid #000;
        }
    </style>
    <script type="text/javascript">

        //       require(["esri/map",
        //                "esri/layers/ArcGISDynamicMapServiceLayer",
        //                "dojo/on",
        //                "dojo/dom",
        //                "esri/tasks/FindTask",
        //                "esri/tasks/FindParameters",
        //                "esri/symbols/SimpleLineSymbol",
        //                "esri/symbols/SimpleFillSymbol",
        //                "esri/graphic",
        //                "dojo/domReady!"],
        //            function (Map, ArcGISDynamicMapServiceLayer, on, dom,
        //                      FindTask, FindParameters,
        //                      SimpleLineSymbol, SimpleFillSymbol, Graphic) {
        //                var map = new esri.Map("mapDiv");
        //                //地图服务的URL
        //                var MapServer = "http://localhost:6080/arcgis/rest/services/gisAPI/MyMapService/MapServer";
        //                var layer = new esri.layers.ArcGISDynamicMapServiceLayer(MapServer);
        //                map.addLayer(layer)
        //                //创建属性查询对象
        //                var findTask = new FindTask(MapServer);
        //                //创建属性查询参数
        //                var findParams = new FindParameters();
        //                on(dom.byId("Btn"), "click", function () {
        //                    //是否返回给我们几何信息
        //                    findParams.returnGeometry = true;
        //                    //对哪一个图层进行属性查询
        //                    findParams.layerIds = [3];
        //                    //查询的字段
        //                    findParams.searchFields = ["Name"];
        //                    //searchText和searchFields结合使用，即查询name=J4
        //                    findParams.searchText = "浙江";
        //                    //执行查询对象
        //                    findTask.execute(findParams, ShowFindResult);
        //                })
        //                function ShowFindResult(queryResult) {
        //                    //创建线符号
        //                    var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
        //                    //创建面符号
        //                    var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);
        //                    if (queryResult.length == 0) {
        //                        dom.byId("divShowResult").innerHTML = "";
        //                        return;
        //                    }
        //                    var htmls = "";
        //                    if (queryResult.length >= 1) {
        //                        htmls = htmls + "<table style=\"width: 100%\">";
        //                        htmls = htmls + "<tr><td>名称</td></tr>";
        //                        for (var i = 0; i < queryResult.length; i++) {
        //                            //获得图形graphic
        //                            var graphic = queryResult[i].feature;
        //                            //赋予相应的符号
        //                            graphic.setSymbol(fill);
        //                            //将graphic添加到地图中，从而实现高亮效果
        //                            map.graphics.add(graphic);
        //                            //获得教学楼名称（此处是和shp属性表对应的）
        //                            var ptName = graphic.attributes["POPName"];
        //                            if (i % 2 == 0)
        //                                htmls = htmls + "<tr>";
        //                            else
        //                                htmls = htmls + "<tr bgcolor=\"#F0F0F0\">";
        //                            htmls = htmls + "<td><a href=\"#\" \">" + ptName + "</a></td>";
        //                            htmls = htmls + "</tr>";
        //                        }
        //                        htmls = htmls + "</table>";
        //                        //将属性绑定在divShowResult上面
        //                        dom.byId("divShowResult").innerHTML = htmls;
        //                    }
        //                }
        //
        //            });
        //
        require(["esri/map",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "dojo/dom",
                "dojo/on",
                "esri/tasks/QueryTask",
                "esri/toolbars/draw",
                "esri/tasks/query",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/graphic",
                "dojo/domReady!"],
            function (Map, ArcGISDynamicMapServiceLayer, dom, on,
                      QueryTask, Draw, Query,
                      SimpleLineSymbol, SimpleFillSymbol, Graphic) {
                var map = new Map("mapdiv");
                var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/gisAPI/MyMapService/MapServer");
                map.addLayer(layer)
                //定义一个绘图工具
                var toolBar = new Draw(map);
                //给button绑定事件
                on(dom.byId("Btn"), "click", function () {
                    //激活绘图工具，我要绘制一个面图形
                    toolBar.activate(Draw.POLYGON);
                })
                on(toolBar, "draw-complete", function (result) {
                    //获得绘图得到的面
                    var geometry = result.geometry;
                    //关闭绘图工具
                    toolBar.deactivate();
                    queryGraphic(geometry);
                });

                function queryGraphic(geometry) {
                    //创建查询对象，注意：服务的后面有一个编号，代表对那一个图层进行查询
                    var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/gisAPI/MyMapService/MapServer/3");
                    //创建查询参数对象
                    var query = new Query();
                    //空间查询的几何对象
                    query.geometry = geometry;
                    //服务器给我们返回的字段信息，*代表返回所有字段
                    query.outFields = ["*"];
                    //空间参考信息
                    query.outSpatialReference = map.spatialReference;
                    //查询的标准，此处代表和geometry相交的图形都要返回
                    query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
                    //是否返回几何信息
                    query.returnGeometry = true;
                    //执行空间查询
                    queryTask.execute(query, showQueryResult);
                }

                function showQueryResult(queryResult) {
                    //创建线符号
                    var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
                    //创建面符号
                    var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);
                    if (queryResult.features.length == 0) {
                        dom.byId("divShowResult").innerHTML = "";
                        return;
                    }
                    var htmls = "";
                    if (queryResult.features.length >= 1) {
                        htmls = htmls + "<table style=\"width: 100%\">";
                        htmls = htmls + "<tr><td>名称</td></tr>";
                        for (var i = 0; i < queryResult.features.length; i++) {
                            //得到graphic
                            var graphic = queryResult.features[i];
                            //给图形赋予符号
                            graphic.setSymbol(fill);
                            //添加到地图从而实现高亮效果
                            map.graphics.add(graphic);
                            //获得教学楼的名称信息，此处应和shp的属性表对应
                            var ptName = graphic.attributes["alias"];
                            if (i % 2 == 0)
                                htmls = htmls + "<tr>";
                            else
                                htmls = htmls + "<tr bgcolor=\"#F0F0F0\">";
                            htmls = htmls + "<td><a href=\"#\"\">" + ptName + "</a></td>";
                            htmls = htmls + "</tr>";
                        }
                        htmls = htmls + "</table>";
                        //将教学楼的名称信息和divShowResult绑定
                        dom.byId("divShowResult").innerHTML = htmls;
                    }
                }
            });
    </script>

</head>
<body>
<div id="mapdiv" class="MapClass" style="width:900px; height:300px; border:1px solid #000;"></div>
<input type="button" value="空间查询" id="Btn"/>
<div id="divShowResult" style="width:900px; height:300px; border:1px solid #000;"></div>

</body>
</html>